<template>
  <div class="hotel-wrap container">
    <div class="hotel-nav">
      <span class="hotel-title">推荐民宿</span>
      <ul
        class="hotel-city"
        v-for="(city, index) in cityList"
        :key="city.cityId"
      >
        <li @mouseover="getHotel(city.cityId, index)">
          {{ city.cityName }}
          <div :class="index === currentIndex ? 'tubiao' : ''"></div>
        </li>
      </ul>
      <router-link to="/themeHotel" class="hotel-nav-right">
        <span>全部</span>
        <span class="iconfont icon-xiangyou"></span>
      </router-link>
    </div>
    <div class="hotel-container">
      <div
        class="hotel-item"
        v-for="product in productList"
        :key="product.poiId"
        @click="goHotelDetail"
      >
        <img :src="product.coverImage" class="hotel-coverImage" />
        <img :src="product.hostAvatarUrl" class="hotel-hostAvatarUrl" />
        <div class="product-title">{{ product.title }}</div>
        <div class="product-text">{{ product.locationArea }}</div>
        <div class="product-price">￥{{ product.price }}</div>
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script>
export default {
  name: "Hotel",
};
</script>

<script setup>
import { getHotelListApi } from "../../../../api/hotel/index";
// import { getHotelListApi } from "@/api/hotel/index";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import throttle from "lodash/throttle";

// 点击查找跳转到详情页
const router = useRouter();
const goHotelDetail = () => {
  router.push({
    name: "HotelDetail",
  });
};
// const productList = [
//   {
//     productId: "13626505",
//     price: 85,
//     hostAvatarUrl:
//       "https://img.meituan.net/avatar/d2e21a9999d083d70ff2023751ed07aa22923.jpg",
//     title:
//       "【誉诚】简约单床房/近从化汽车客运站/地铁站/禾仓幼儿园旁边，距离城建学院半公里",
//     rentType: 0,
//     layoutRoom: 1,
//     maxGuestNumber: 2,
//     locationArea: "从化温泉旅游区",
//     starRating: 48,
//     commentNumber: 12,
//     coverImage:
//       "http://p0.meituan.net/iphoenix/cde336f90469af6a85b3f490ba65896c119280.jpg",
//     favCount: 61,
//     poiId: "1779040767",
//     dpPoiId: "1779040767",
//   },
//   {
//     productId: "13285706",
//     price: 252,
//     hostAvatarUrl:
//       "https://img.meituan.net/avatar/773aa2fe273af1951dce4ad2adcd7d8d10991.jpg",
//     title:
//       "【时光里】高端公寓/近地铁／大学城/生物岛／黄埔军校/岭南印象园/带投影/可洗衣/可做饭/北欧温馨浪漫/精装修大单间",
//     rentType: 0,
//     layoutRoom: 1,
//     maxGuestNumber: 2,
//     locationArea: "大学城/黄埔军校",
//     starRating: 48,
//     commentNumber: 14,
//     coverImage:
//       "https://img.meituan.net/phoenix/1d35ee7135d3a4ee1e6fbf79261107f52306785.jpg",
//     favCount: 95,
//     poiId: "898760140",
//     dpPoiId: "898760140",
//   },
//   {
//     productId: "16376310",
//     price: 188,
//     hostAvatarUrl:
//       "https://img.meituan.net/avatar/8e351d9c3cafca38b7fcece58388b5ab34777.jpg",
//     title:
//       "【新房专享】广侨时代公寓/可做饭/大阳台/全新轻奢温馨套房/地下停车场/设施配套齐全/自助入住配置密码锁/一客一换消毒",
//     rentType: 0,
//     layoutRoom: 1,
//     maxGuestNumber: 2,
//     locationArea: "新塘商业中心区",
//     starRating: 50,
//     commentNumber: 1,
//     coverImage:
//       "https://img.meituan.net/iphoenix/fb2ca4b9ed5539641b61ecb7860cc0567391680.jpg",
//     favCount: 41,
//     poiId: "1523402296",
//     dpPoiId: "1523402296",
//   },
//   {
//     productId: "15561003",
//     price: 75,
//     hostAvatarUrl:
//       "https://img.meituan.net/avatar/91df3eb71dee6e32d853febd2517539119785.jpg",
//     title: "一居独卫1.5大床，高性价比，周边设施齐全，交通便利，欢迎咨询预订",
//     rentType: 0,
//     layoutRoom: 1,
//     maxGuestNumber: 2,
//     locationArea: "萝岗科学城/宝能演艺中心",
//     starRating: 47,
//     commentNumber: 3,
//     coverImage:
//       "https://p0.meituan.net/iphoenix/b3b0008a7b624c1e0eeaf02a2793887b1531343.jpg",
//     favCount: 38,
//     poiId: "552511780",
//     dpPoiId: "552511780",
//   },
//   {
//     productId: "1268921",
//     price: 128,
//     hostAvatarUrl:
//       "https://img.meituan.net/avatar/332e3f1026f7efce83c81d3367712e6236442.jpg",
//     title: "【青江晓】万科米酷科学城广交会独立公寓",
//     rentType: 0,
//     layoutRoom: 1,
//     maxGuestNumber: 2,
//     locationArea: "萝岗科学城/宝能演艺中心",
//     starRating: 47,
//     commentNumber: 118,
//     coverImage:
//       "http://p0.meituan.net/iphoenix/580b18450cf6a6b8c747bb2eda2b25ac2183851.jpg",
//     favCount: 1633,
//     poiId: "169020289",
//     dpPoiId: "102067679",
//   },
//   {
//     productId: "11440225",
//     price: 89,
//     hostAvatarUrl:
//       "https://img.meituan.net/avatar/278378ea9c0b16efe72ba912b93cb91517195.jpg",
//     title:
//       "时代公馆 温馨大床房 近市桥地铁B出口 英东体育馆 易发商业街 长短租 日月租",
//     rentType: 0,
//     layoutRoom: 1,
//     maxGuestNumber: 3,
//     locationArea: "番禺市桥/亚运城",
//     starRating: 46,
//     commentNumber: 14,
//     coverImage:
//       "http://p0.meituan.net/iphoenix/b18af3fa95658ac58433cabf2a5c497f95152.jpg",
//     favCount: 100,
//     poiId: "1769165998",
//     dpPoiId: "1769165998",
//   },
// ];

const cityList = [
  { cityId: 440100, cityName: "广州" },
  { cityId: 350200, cityName: "厦门" },
  { cityId: 440400, cityName: "珠海" },
  { cityId: 450300, cityName: "桂林" },
  { cityId: 460100, cityName: "海口" },
  { cityId: 441300, cityName: "惠州" },
  { cityId: 440600, cityName: "佛山" },
  { cityId: 441900, cityName: "东莞" },
  { cityId: 441800, cityName: "清远" },
  { cityId: 440800, cityName: "湛江" },
];
// const cityId = [
//   440100, 350200, 440400, 450300, 460100, 441300, 440600, 441900, 441800,
//   440800,
// ];

// const list = ref([]);
// const getHotelList = () => {
//   cityId.forEach(async (item) => {
//     const res = await getHotelListApi(item);
//     list.value = res;
//     console.log(res);
//     productList.value = res.productList;
//   });
// };

const currentIndex = ref(0);

const productList = ref();
// 鼠标移入获取城市民宿
const getHotel = async (cityId, index = 0) => {
  const res = await getHotelListApi(cityId);
  productList.value = res.productList;
  currentIndex.value = index;
};

onMounted(() => {
  getHotel(440100);
});
</script>

<style scoped>
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hotel-wrap {
  margin-top: 40px;
  height: 100%;
}
.hotel-nav {
  color: #fff;
  background-color: #f2bd47;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
  display: flex;
  height: 45px;
  line-height: 45px;
}
.hotel-title {
  font-size: 18px;
  padding: 0 5px;
  margin: 0 10px 0 13px;
  font-family: "MFShangHei-Regular" !important;
}
.hotel-city {
  display: flex;
  font-size: 14px;
}
.hotel-city li {
  padding: 0 5px;
  cursor: pointer;
  position: relative;
}
/* .hotel-city li:hover .tubiao {
  display: block;
} */
.tubiao {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -25%;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 8px;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #fff;
  /* display: none; */
}
.hotel-nav-right {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  display: flex;
}
.icon-xiangyou {
  font-size: 25px;
}

.hotel-container {
  width: 100%;
  height: 689px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #e5e5e5;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}
.hotel-item {
  width: 33.33%;
  position: relative;
}
.hotel-coverImage {
  width: 370px;
  height: 208px;
  border-radius: 5px;
  margin-bottom: 11px;
}
.hotel-hostAvatarUrl {
  position: absolute;
  right: 25px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.product-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 75%;
  padding-left: 10px;
  padding-top: 7px;
}
.product-text {
  font-size: 12px;
  color: #999;
  text-align: left;
  text-indent: 7px;
}
.product-price {
  font-size: 18px;
  color: #ff6600;
  font-weight: 700;
  text-align: left;
  text-indent: 7px;
  padding-bottom: 25px;
}
</style>
